<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认证管理</title>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
    <script src="//unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
    <script src="//unpkg.com/element-ui@2.15.13/lib/index.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .filters {
            background: white;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .el-button--primary {
            background-color: #409EFF;
            border-color: #409EFF;
        }
        .el-table {
            background: white;
            border-radius: 4px;
        }
        .actions {
            display: flex;
            gap: 8px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-card shadow="never" style="margin-bottom: 20px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h2 style="margin: 0;">认证管理</h2>
                <el-button type="primary" @click="handleCreate">新增认证</el-button>
            </div>
        </el-card>

        <!-- 筛选条件 -->
        <div class="filters">
            <el-form :inline="true" :model="filters">
                <el-form-item label="认证名称">
                    <el-input v-model="filters.name" placeholder="请输入认证名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input v-model="filters.user_id" placeholder="请输入用户ID" clearable></el-input>
                </el-form-item>
                <el-form-item label="领域ID">
                    <el-input v-model="filters.cate_id" placeholder="请输入领域ID" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="resetFilters">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 数据表格 -->
        <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            border
        >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="认证名称" width="180"></el-table-column>
            <el-table-column prop="user_id" label="用户ID" width="100"></el-table-column>
            <el-table-column prop="cate_id" label="领域ID" width="100"></el-table-column>
            <el-table-column label="认证资料" width="200">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="viewInformation(scope.row)">查看资料</el-button>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180" :formatter="formatTime"></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="scope">
                    <div class="actions">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div style="margin-top: 20px; text-align: right;">
            <el-pagination
                v-model="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>

        <!-- 认证资料查看对话框 -->
        <el-dialog title="认证资料" :visible.sync="dialogVisible" width="60%">
            <div v-if="currentInformation && currentInformation.length > 0">
                <div v-for="(item, index) in currentInformation" :key="index" style="margin-bottom: 20px;">
                    <p>名称：{{ item.name }}</p>
                    <div v-if="item.file">
                        <img :src="item.file.replace(/`/g, '')" style="max-width: 100%; max-height: 300px;">
                    </div>
                </div>
            </div>
            <div v-else>暂无认证资料</div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: false,
                    tableData: [],
                    filters: {
                        name: '',
                        user_id: '',
                        cate_id: ''
                    },
                    pagination: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 0
                    },
                    dialogVisible: false,
                    currentInformation: []
                };
            },
            created() {
                this.fetchList();
            },
            methods: {
                fetchList() {
                    this.loading = true;
                    
                    const params = {
                        ...this.filters,
                        page: this.pagination.currentPage,
                        page_size: this.pagination.pageSize
                    };
                    
                    axios.get('/science/authentication/list', { params })
                        .then(res => {
                            if (res.data && !res.data.error) {
                                this.tableData = res.data.data.data || [];
                                this.pagination.total = res.data.data.total || 0;
                            } else {
                                this.$message.error(res.data.msg || '获取数据失败');
                            }
                        })
                        .catch(err => {
                            console.error('获取列表失败:', err);
                            this.$message.error('获取数据失败');
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },
                
                handleSearch() {
                    this.pagination.currentPage = 1;
                    this.fetchList();
                },
                
                resetFilters() {
                    this.filters = {
                        name: '',
                        user_id: '',
                        cate_id: ''
                    };
                    this.pagination.currentPage = 1;
                    this.fetchList();
                },
                
                handleSizeChange(size) {
                    this.pagination.pageSize = size;
                    this.fetchList();
                },
                
                handleCurrentChange(current) {
                    this.pagination.currentPage = current;
                    this.fetchList();
                },
                
                handleCreate() {
                    window.location.href = '/science/authentication/create';
                },
                
                handleEdit(row) {
                    window.location.href = `/science/authentication/create?id=${row.id}`;
                },
                
                handleDelete(row) {
                    this.$confirm('确定要删除这条认证记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post('/science/authentication/delete', { id: [row.id] })
                            .then(res => {
                                if (res.data && !res.data.error) {
                                    this.$message.success('删除成功');
                                    this.fetchList();
                                } else {
                                    this.$message.error(res.data.msg || '删除失败');
                                }
                            })
                            .catch(err => {
                                console.error('删除失败:', err);
                                this.$message.error('删除失败');
                            });
                    }).catch(() => {
                        // 取消删除
                    });
                },
                
                viewInformation(row) {
                    try {
                        this.currentInformation = Array.isArray(row.information_json) ? 
                            row.information_json : 
                            (typeof row.information_json === 'string' ? 
                                JSON.parse(row.information_json) : []);
                        this.dialogVisible = true;
                    } catch (e) {
                        console.error('解析认证资料失败:', e);
                        this.$message.error('解析认证资料失败');
                    }
                },
                
                formatTime(row, column, cellValue) {
                    if (!cellValue) return '-';
                    const date = new Date(cellValue * 1000);
                    return date.toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                }
            }
        });
    </script>
</body>
</html>